<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>听歌</title>
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/chat.css">
    <link rel="shortcut icon" href="./images/mycat.png" type="image/x-icon">
</head>

<body>
    <canvas id="cas"></canvas>
    <div class="container">
        <div class="box">
            <div class="left">
                <div class="itemgroup">
                    <div class="items itemshead">
                        <div class="hdimg">
                            <img src="./images/mycat.png" width="104" height="82" alt="" title="Hi~">
                        </div>
                    </div>
                    <div class="items">
                        <div class="running itemstyle" onclick="location='chat.html'">弹幕聊天</div>
                    </div>
                    <div class="items">
                        <div class="bgmplayer itemstyle" onclick="location='bgm.html'">听歌</div>
                    </div>
                    <div class="items">
                        <div class="about itemstyle" onclick="location='about.html'">关于</div>
                    </div>
                    <div class="items itemsbottom">
                        <div id="loginout" class="itemstyle" onclick="location='index.htm'">退出聊天</div>
                    </div>
                </div>
            </div>
            <div class="right">
                <div class="big">
                    <div class="z">
                        <div class="tp">
                            <img src="images/daxi.jpg" alt="bye">
                        </div>
                        <p>
                            <button class="button1" onclick="playDaXi();"></button>
                            <button class="button2" onclick="pauseDaXi();"></button>
                            <span>泠鸢yousa - 大喜</span>
                        </p>
                    </div>

                    <div class="y">
                        <div class="tp">
                            <img src="images/sky.jpg" alt="bye">
                        </div>
                        <p>
                            <button class="button1" onclick="playSky();"></button>
                            <button class="button2" onclick="pauseSky();"></button>
                            <span>Little End - Sky</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./js/canvas.js"></script>
    <script>
        var audio = document.createElement("audio"),
            audioTwo = document.createElement("audio");
        audio.src = "music/泠鸢yousa-大喜.mp3";
        audioTwo.src = "music/LittleEnd-Sky.mp3";

        function playDaXi() {
            audio.play();
            console.log("大喜开始播放");
        }

        function playSky() {
            audioTwo.play();
            console.log("Sky开始播放");
        }

        function pauseDaXi() {
            audio.pause();
            console.log("大喜暂停播放");
        }

        function pauseSky() {
            audioTwo.pause();
            console.log("Sky暂停播放");
        }
    </script>
</body>

</html>